<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { getAssetOverviewStatistics } from "@/api/task";
import OverviewCards from "./components/OverviewCards.vue";
import ComplianceChart from "./components/ComplianceChart.vue";
import VulnerabilityCards from "./components/VulnerabilityCards.vue";
import DepartmentChart from "./components/DepartmentChart.vue";
import RiskLevelChart from "./components/RiskLevelChart.vue";

defineOptions({
  name: "Welcome",
});

const loading = ref(false);
const statistics = ref<any>({});

// 获取统计数据
const fetchStatistics = async () => {
  loading.value = true;
  try {
    const res = await getAssetOverviewStatistics();
    if (res.code === 2000) {
      statistics.value = res.data;
    } else {
      ElMessage.error(res.message || "获取统计数据失败");
    }
  } catch (error) {
    console.error("获取统计数据失败:", error);
    ElMessage.error("获取统计数据失败");
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  fetchStatistics();
});
</script>

<template>
  <div v-loading="loading" class="welcome-container">
    <!-- 总体概览 -->
    <OverviewCards :data="statistics.overview || {}" />

    <!-- 第一行：合规状态和漏洞统计 -->
    <div class="chart-row">
      <div class="chart-item">
        <ComplianceChart :data="statistics.compliance_distribution || {}" />
      </div>
      <div class="chart-item">
        <el-card shadow="hover">
          <template #header>
            <span class="card-title">漏洞等级分布</span>
          </template>
          <VulnerabilityCards :data="statistics.vulnerability_summary || {}" />
        </el-card>
      </div>
    </div>

    <!-- 第二行：风险等级和部门分布 -->
    <div class="chart-row">
      <div class="chart-item">
        <RiskLevelChart :data="statistics.risk_level_distribution || {}" />
      </div>
      <div class="chart-item">
        <DepartmentChart :data="statistics.department_distribution || []" />
      </div>
    </div>

    <!-- 第三行：高危资产和差异统计 -->
    <div class="chart-row">
      <el-card shadow="hover" class="chart-item">
        <template #header>
          <span class="card-title">高危资产统计</span>
        </template>
        <div class="high-risk-content">
          <div class="risk-stat">
            <div class="stat-label">高危IP数量</div>
            <div class="stat-value danger">
              {{ statistics.high_risk_summary?.high_risk_ip_count || 0 }}
            </div>
            <div class="stat-percentage">
              占比:
              {{ statistics.high_risk_summary?.high_risk_ip_percentage || 0 }}%
            </div>
          </div>
          <div class="risk-stat">
            <div class="stat-label">高危端口数量</div>
            <div class="stat-value danger">
              {{ statistics.high_risk_summary?.high_risk_port_count || 0 }}
            </div>
          </div>
        </div>
      </el-card>

      <el-card shadow="hover" class="chart-item">
        <template #header>
          <span class="card-title">本地/异地差异统计</span>
        </template>
        <div class="diff-content">
          <div class="diff-stat">
            <el-alert :closable="false">
              <div class="diff-item">
                <span class="diff-label">新增端口的IP数</span>
                <span class="diff-value new">{{
                  statistics.location_diff_summary?.new_port_ip_count || 0
                }}</span>
              </div>
            </el-alert>
          </div>
          <div class="diff-stat">
            <el-alert :closable="false" type="warning">
              <div class="diff-item">
                <span class="diff-label">关闭端口的IP数</span>
                <span class="diff-value closed">{{
                  statistics.location_diff_summary?.closed_port_ip_count || 0
                }}</span>
              </div>
            </el-alert>
          </div>
          <div class="diff-stat">
            <el-alert :closable="false" type="error">
              <div class="diff-item">
                <span class="diff-label">服务差异的IP数</span>
                <span class="diff-value diff">{{
                  statistics.location_diff_summary?.service_diff_ip_count || 0
                }}</span>
              </div>
            </el-alert>
          </div>
          <div class="diff-stat">
            <el-alert :closable="false" type="info">
              <div class="diff-item">
                <span class="diff-label">存在差异的IP总数</span>
                <span class="diff-value total">{{
                  statistics.location_diff_summary?.total_diff_ip_count || 0
                }}</span>
              </div>
            </el-alert>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 第四行：端口统计 -->
    <el-card shadow="hover" class="full-width">
      <template #header>
        <span class="card-title">端口Top10统计</span>
      </template>
      <div class="port-charts">
        <el-card shadow="never" class="port-chart-item">
          <div style="font-weight: 600; margin-bottom: 16px">
            本地设备端口Top10
          </div>
          <div class="port-list">
            <div
              v-for="(item, index) in statistics.port_statistics
                ?.top_local_ports || []"
              :key="index"
              class="port-item"
            >
              <span class="port-number">{{ item.port }}</span>
              <span class="port-label">出现次数: {{ item.count }}</span>
            </div>
          </div>
        </el-card>
        <el-card shadow="never" class="port-chart-item">
          <div style="font-weight: 600; margin-bottom: 16px">
            异地设备端口Top10
          </div>
          <div class="port-list">
            <div
              v-for="(item, index) in statistics.port_statistics
                ?.top_remote_ports || []"
              :key="index"
              class="port-item"
            >
              <span class="port-number">{{ item.port }}</span>
              <span class="port-label">出现次数: {{ item.count }}</span>
            </div>
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.welcome-container {
  padding: 16px;
}

.chart-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.chart-item {
  height: 100%;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.high-risk-content {
  display: flex;
  gap: 32px;
  padding: 16px;
}

.risk-stat {
  flex: 1;
  text-align: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 8px;

  &.danger {
    color: #f5222d;
  }
}

.stat-percentage {
  font-size: 14px;
  color: #909399;
}

.diff-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.diff-stat {
  :deep(.el-alert__content) {
    width: 100%;
  }
}

.diff-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.diff-label {
  font-size: 14px;
  color: #606266;
}

.diff-value {
  font-size: 18px;
  font-weight: 600;

  &.new {
    color: #1890ff;
  }

  &.closed {
    color: #faad14;
  }

  &.diff {
    color: #f5222d;
  }

  &.total {
    color: #1890ff;
  }
}

.full-width {
  margin-bottom: 24px;
}

.port-charts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.port-chart-item {
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.port-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.port-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 12px;
  background: white;
  border-radius: 4px;
  border-left: 3px solid #409eff;
}

.port-number {
  font-size: 18px;
  font-weight: 600;
  color: #409eff;
  min-width: 60px;
}

.port-label {
  font-size: 14px;
  color: #606266;
}
</style>
